import { Button, Card, Drawer, Space, Tag, Typography } from "antd";
import { Iconify } from "@/components/icon";
import parse from "html-react-parser";
import type { TaskItem } from "@/api/services/taskService";
import TaskForm from "./TaskForm";

interface TaskDetailModalProps {
	visible: boolean;
	currentTask: TaskItem | undefined;
	form: any;
	onCancel: () => void;
	onSubmit: () => void;
}

const TaskDetailModal = ({
	visible,
	currentTask,
	form,
	onCancel,
	onSubmit,
}: TaskDetailModalProps) => {
	if (!currentTask) return null;

	return (
		<Drawer
			open={visible}
			title={
				<div className="flex items-center gap-2">
					<span>任务详情</span>
					{currentTask?.status === 1 && (
						<Tag color="success" className="ml-2">
							可提交
						</Tag>
					)}
				</div>
			}
			footer={
				<div className="flex items-center justify-between">
					<Typography.Text type="secondary" className="text-sm">
						{/* {form.getFieldValue("formList")?.length || 1} 组数据待提交 */}
					</Typography.Text>
					<Space>
						<Button onClick={onCancel}>取消</Button>
						<Button
							type="primary"
							onClick={onSubmit}
							icon={<Iconify icon="material-symbols:task-alt" />}
						>
							提交任务
						</Button>
					</Space>
				</div>
			}
			onClose={onCancel}
			width={800}
			styles={{
				body: {
					backgroundColor: "#f5f5f5",
					padding: "24px",
				},
			}}
			className="task-detail-drawer"
		>
			<div className="space-y-4">
				<Card
					size="small"
					className="shadow-sm"
					title={
						<div className="flex items-center justify-between">
							<Typography.Text strong>基本信息</Typography.Text>
							<Space size={24} className="items-center">
								<Space size={4}>
									<Iconify
										icon="material-symbols:tag"
										className="text-gray-400"
									/>
									<Typography.Text code>{currentTask.id}</Typography.Text>
								</Space>
								<Space size={4}>
									<Iconify
										icon="material-symbols:payments"
										className="text-gray-400"
									/>
									<Typography.Text type="success" strong>
										¥{currentTask.price}
									</Typography.Text>
								</Space>
								{currentTask.attachment && (
									<Button
										type="text"
										className="flex items-center hover:text-primary"
										icon={<Iconify icon="material-symbols:download" />}
										onClick={() => {
											const element = document.createElement("a");
											element.href = currentTask.attachment;
											element.download = `任务${currentTask.id}附件${currentTask.attachment.substring(
												currentTask.attachment.lastIndexOf("."),
											)}`;
											document.body.appendChild(element);
											element.click();
											document.body.removeChild(element);
										}}
									>
										下载附件
									</Button>
								)}
							</Space>
						</div>
					}
				>
					<div className="grid grid-cols-1 gap-4">
						<div>
							<Typography.Title level={5} className="!mb-0">
								{currentTask.title}
							</Typography.Title>
						</div>
						<div className="flex items-center gap-8">
							<Space size={4}>
								<Iconify
									icon="material-symbols:category"
									className="text-gray-400"
								/>
								<Tag color="cyan">{currentTask.category?.name}</Tag>
							</Space>
							<Space size={4}>
								<Iconify
									icon="material-symbols:check-circle"
									className="text-gray-400"
								/>
								<Tag color={currentTask.status === 1 ? "success" : "default"}>
									{currentTask.status_text}
								</Tag>
							</Space>
						</div>
					</div>
				</Card>

				{currentTask.description && (
					<Card
						size="small"
						className="shadow-sm"
						title={<Typography.Text strong>任务描述</Typography.Text>}
					>
						<Typography.Paragraph className="mb-0 task-description prose max-w-none">
							{parse(currentTask.description)}
						</Typography.Paragraph>
					</Card>
				)}

				{currentTask.taskFields && currentTask.taskFields.length > 0 && (
					<Card
						size="small"
						className="shadow-sm"
						title={
							<div className="flex items-center justify-between">
								<Typography.Text strong>任务表单</Typography.Text>
								<Typography.Text type="secondary" className="text-sm">
									共 {currentTask.taskFields.length} 个字段
								</Typography.Text>
							</div>
						}
					>
						<TaskForm form={form} taskFields={currentTask.taskFields} />
					</Card>
				)}
			</div>
		</Drawer>
	);
};

export default TaskDetailModal;
